import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import classNames from 'classnames'
import { DNavBar, DAtInpute } from '@/components'
import { AtForm, AtButton, AtIcon } from 'taro-ui'
import md5 from 'js-md5'
import http from '@/api'
import './editpassword.scss'

export default class EditpasswordBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            title: '修改密码',
            isShow: false,
            userinfo: {
                oldpassword: '',
                newpassword: '',
                secondpassword: ''
            },
            type: '',
            statusPass: false,
            statusNewPass: false,
            statusSePass: false
        }
    }

    componentWillMount() {
        let { telphone, type = '' } = this.$router.params
        let { isShow, title } = this.state
        if (type === 'password') {
            isShow = true
            title = '找回密码'
        }
        this.setState({
            userinfo: Object.assign(this.state.userinfo, { ['telphone']: telphone }),
            type,
            isShow,
            title
        })
    }



    //下一步
    NextStep() {
        let { userinfo } = this.state
        if (!userinfo.oldpassword) {
            return Taro.showToast({
                icon: "none",
                title: '请您完善填写信息！'
            })
        }
        http.getPasswordRight({ oldPassword: !this.$router.params.md5?md5(userinfo.oldpassword):userinfo.oldpassword }).then(res => {
            if (res) {
                this.setState({
                    isShow: true
                })
            } else {
                return Taro.showToast({
                    title: '旧密码输入错误！',
                    icon: 'none',
                    duration: 800
                })
            }
        })
    }
    //返回上一步
    onClickLeftIcon() {
        let { isShow, type } = this.state
        if (type === 'password') {
            Taro.navigateBack({ delta: 1 })
        } else if (isShow) {
            this.setState({ isShow: false });
        } else {
            Taro.navigateBack({ delta: 1 })
        }
    }

    onSubmit() {
        let { userinfo } = this.state
		let {firstCode,NextStep} = this.props
		userinfo = {...userinfo,'firstCode':firstCode}
		let { telphone, type = '' } = this.$router.params
        let _obj = ['newpassword', ]
		if(type === 'password'){
			_obj.push('firstCode')
		}else{
			_obj.push('secondpassword')
		}
		NextStep&&NextStep()
       for(var i in _obj){
		  var item = _obj[i]
            if (!userinfo[item]) {
                return Taro.showToast({
                    icon: "none",
                    title: '请您完善填写信息！'
                })
            }
        }

        let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^_.&*?]+)$)^[\w~!@#$%^_.&*?]{6,20}$/
        if (userinfo.newpassword && !reg.test(userinfo.newpassword)) {
            return Taro.showToast({
                title: '密码长度为6-20个字，必须同时包含字母、数字、特殊符号中的两种!',
                icon: "none"
            })
        } else if (userinfo.secondpassword && !reg.test(userinfo.secondpassword)) {
            return Taro.showToast({
                title: '密码长度为6-20个字，必须同时包含字母、数字、特殊符号中的两种!',
                icon: "none"
            })
        } else if (userinfo.secondpassword !== userinfo.newpassword) {
            return Taro.showToast({
                title: '密码不一致！',
                icon: "none"
            })
        }

		if (type === 'password') {
			let obj0 = {
			    pwd: !this.$router.params.md5?md5(userinfo.newpassword):userinfo.newpassword,//md5(userinfo.newpassword),
			    mobile: userinfo.telphone||this.props.firstPhone,
				code:firstCode
			}
			http.forgetPwd(obj0).then(() => {
			    Taro.showToast({
			        title: '已找回密码',
			        duration: 800
			    }).then(() => {
			        setTimeout(() => {
						window.bridge.callHandler('logout', {}, function responseCallback(res) {});
						}, 1000);

			    })
			})
		}else{
			let obj = {
            newPassword: !this.$router.params.md5?md5(userinfo.newpassword):userinfo.newpassword ,//md5(userinfo.newpassword),
            phone: userinfo.telphone
        }
			http.setUserPass(obj).then(() => {
			    Taro.showToast({
			        title: '已修改密码',
			        duration: 800
			    }).then(() => {
                    http.logout().then(res => {
                        localStorage.removeItem("X-Auth0-Token")
                        setTimeout(() => {
                            if (window.bridge) {
                                window.bridge.callHandler('logout', {}, function responseCallback(res) { })
                            }
                        }, 1000)
                    })
			    })
			})
		}


    }

    bindCarform(key, value) {
        if (key) {
            this.setState({
                userinfo: Object.assign(this.state.userinfo, { [key]: value })
            })
        }
    }

    onPasswordHandle() {
        let { statusPass } = this.state
        statusPass = !statusPass
        this.setState({
            statusPass
        })
    }

    onNewPassHandle() {
        let { statusNewPass } = this.state
        statusNewPass = !statusNewPass
        this.setState({
            statusNewPass
        })
    }

    onSePassHandle() {
        let { statusSePass } = this.state
        statusSePass = !statusSePass
        this.setState({
            statusSePass
        })
    }


    render() {
        const {
            isShow,
            userinfo,
            title,
            statusPass,
            statusNewPass,
            statusSePass
        } = this.state
		const {firstCode} = this.props
		const userinfoProps = firstCode ===''||firstCode
        const _bindCarform = function (value) {
            this.bindCarform(arguments[arguments.length - 1].bind, value)
        }
        return (
            <View className={classNames('b_editpassword',userinfoProps?'isProphone':'')} >
                {!userinfoProps&&<DNavBar title={title} status={isShow} onClickLeftIcon={this.onClickLeftIcon.bind(this)}></DNavBar>}
                {

                    !isShow ? <View className={classNames(isShow ? '' : 'showbox', 'b_editpassword__box', 'b_editpassword__box_oldpassword')}>
                        <View className='b_editpassword__form'>
                            <View className='b_editpassword__form-icon'>
                                <DAtInpute maxLength={20} type={statusPass ? 'text' : 'password'} onChange={_bindCarform.bind(this)} bind='oldpassword' value={userinfo.oldpassword} title='旧密码' placeholder='请输入旧密码'></DAtInpute>
                                <AtIcon className={classNames(statusPass ? '' : 'b_editpassword__form-line')} value='eye' size='24' color='#666' onClick={this.onPasswordHandle.bind(this)}></AtIcon>
                            </View>
                        </View>
                        <View className='b_editpassword__footer'>
                            <AtButton className='item_btn' onClick={this.NextStep.bind(this)}>下一步</AtButton>
                        </View>
                    </View>
                        : <View className={classNames(isShow ? 'showbox' : '', 'b_editpassword__box', 'b_editpassword__box_newpassword')}>
                            <View className='b_editpassword__form' style={userinfoProps?'padding:0':''}>
                                <AtForm >
                                    <View className='b_editpassword__form-icon'>
                                        <DAtInpute maxLength={20} title='新密码' type={statusNewPass ? 'text' : 'password'} onChange={_bindCarform.bind(this)} bind='newpassword' value={userinfo.newpassword} placeholder='密码，6-20位英文、数字或符号组成'></DAtInpute>
                                        <AtIcon className={classNames(statusNewPass ? '' : 'b_editpassword__form-line')} value='eye' size='24' color='#666' onClick={this.onNewPassHandle.bind(this)}></AtIcon>
                                    </View>
                                    <View className='b_editpassword__form-icon'>
                                        <DAtInpute maxLength={20} title='再次确认' type={statusSePass ? 'text' : 'password'} onChange={_bindCarform.bind(this)} bind='secondpassword' value={userinfo.secondpassword} placeholder='请再次确认密码'></DAtInpute>
                                        <AtIcon className={classNames(statusSePass ? '' : 'b_editpassword__form-line')} value='eye' size='24' color='#666' onClick={this.onSePassHandle.bind(this)}></AtIcon>
                                    </View>
                                </AtForm>
                            </View>
                            <View className='b_editpassword__footer'>
                                <AtButton className='item_btn' onClick={this.onSubmit.bind(this)}>完成</AtButton>
                            </View>
                        </View>
                }
            </View >
        )
    }
}
